﻿@using OF.Component.Model;
@{
    ViewBag.Title = "ConfigExpressTemplateEdit";
    Layout = "~/Views/Shared/layoutCommon.cshtml";
}
@{
    var expressList = (ViewBag.ExpressList as List<ExpressCompanyInfo>) ?? new List<ExpressCompanyInfo>();
    var tplInfo = (ViewBag.TplInfo as ExpressFeeTplInfo) ?? new ExpressFeeTplInfo();
    var tplCitys = (ViewBag.TplCityList as List<ExpressFeeTplCityInfo>) ?? new List<ExpressFeeTplCityInfo>();
}
@section style{
    <style>
        .inline {
            display: inline-block
        }

        .province {
            float: left;
            width: 8%;
            padding: 0;
            text-align: center;
        }

        .citys {
            float: left;
            width: 92%;
            overflow: hidden;
        }

        .city-item {
            float: left;
            padding-right: 5px;
            padding-top: 5px;
            font-size: 16px;
        }

        .form-horizontal .control-label {
            font-size: 16px;
        }

        .box-footer {
            box-sizing: border-box;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: white;
        }

        .box-body {
            padding-bottom: 55px;
            padding-top: 175px;
        }

        .position-top {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            background-color: white;
            z-index: 120;
            margin-bottom: 0;
            padding-bottom: 17px;
            padding-top: 10px;
        }

        .position-btn {
            position: fixed;
            left: 0;
            top: 125px;
            width: 100%;
            background-color: white;
            z-index: 120;
            margin-bottom: 0;
            padding-bottom: 15px;
            border-bottom: 2px solid #eee;
        }

        .box.box-default {
            border-color: #fff;
        }
    </style>

}
<form id="form1" class="form-horizontal">
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box-body">
                    <div class=" position-top">
                        <div class="form-group">
                            <label class="col-sm-2 control-label inline" for="name" style="width:12%">模版名称：</label>
                            <div class="col-sm-2 inline">
                                <input class="form-control " style="width:200px;" value="@tplInfo.TemplateName" maxlength="50" name="templateName" id="templateName" />
                            </div>
                            <label class="col-sm-2 control-label inline" for="name">快递公司：</label>
                            <div class="col-sm-2 inline">
                                <select name="expressId" id="expressId" style="width:200px" class="form-control">
                                    @foreach (var item in expressList)
                                    {
                                        if (item.ExpressCompanyID == tplInfo.ExpressCompanyID)
                                        {
                                            <option selected value="@item.ExpressCompanyID">@item.CompanyName</option>
                                        }
                                        else
                                        {
                                            <option value="@item.ExpressCompanyID">@item.CompanyName</option>
                                        }
                                    }
                                </select>
                            </div>
                            <label class="col-sm-2 control-label inline" for="name">快递费用：</label>
                            <div class="col-sm-2 inline">
                                @if (tplInfo.ExpressFeeTplID > 0)
                                {
                                    <input class="form-control " style="width:200px;" value="@tplInfo.ExpressFee" maxlength="8" name="expressPrice" id="expressPrice" placeholder="请输入整数或2位以内小数的金额" />
                                }
                                else
                                {
                                    @*添加时不显示0*@
                                    <input class="form-control " style="width:200px;" maxlength="8" name="expressPrice" id="expressPrice" placeholder="请输入整数或2位以内小数" />
                                }
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label inline" for="name" style="width:12%">备注说明：</label>
                            <div class="col-sm-10 inline">
                                <input class="form-control " style="width:700px;" value="@tplInfo.Remark" maxlength="50" name="remark" id="remark" />
                            </div>
                        </div>

                    </div>
                    <div class="box box-default">
                        <div class="form-group position-btn">
                            <label class="col-sm-2 control-label " for="name">
                                <input type="button" class="btn btn-primary" id="selAll" value="全选" />
                                <input type="button" class="btn btn-primary" id="selInvert" value="反选" />
                            </label>
                            <div class="col-sm-8 " style="padding-top:15px;">
                                <span style="color:red; ">注：勾选标红城市会覆盖该城市在其他模版中的配置</span>
                            </div>
                        </div>
                        <div id="cityArea">
                            @*<div class="form-group" style="overflow:hidden;">
                                    <label class="col-sm-2 control-label province" for="name">
                                        北京
                                    </label>
                                    <div class="col-sm-3 citys">
                                        <div class="city-item">
                                            <input type="checkbox" value="201" />北京
                                        </div>
                                    </div>
                                    <div class="col-sm-3 citys">
                                        <div class="city-item">
                                            <input type="checkbox" value="201" />北京
                                        </div>
                                    </div>
                                </div>*@
                        </div>

                    </div>
                </div>
                <div class="box-footer text-center">
                    <button class="btn btn-primary" type="button" id="btnSave">确 定 </button>
                    <button class="btn" type="button" id="cancel">取 消 </button>
                </div>
            </div>

        </div>
        <!-- /.row -->
    </section>

</form>

@section scriptsBottom{
    <script src="~/js/citydata.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            initExtends();
            var initSelCitysStr = '@ViewBag.TplCityStr' || "";//当前模版配置的城市，编辑页面需要默认选中
            var existCityStr = '@ViewBag.TplExistCityStr' || "";//已经在其他模版配置过的城市
            initCitys(initSelCitysStr, existCityStr);
            initFormValidate();
            $("#btnSave").click(function () {
                save(existCityStr);
            });
            $("#cancel").click(function () {
                BMCW.closeTopLayer();
            });
        });

        function initFormValidate() {
            $("#form1").bootstrapValidator({
                submitHandler: function (valiadtor, loginForm, submitButton) {
                    valiadtor.defaultSubmit();
                },
                fields: {
                    templateName: {
                        validators: {
                            notEmpty: {
                                message: '模板名称不能为空'
                            }
                        }
                    },
                    expressPrice: {
                        validators: {
                            notEmpty: {
                                message: '快递费用不能为空'
                            },
                            regexp: {
                                regexp: /^[0-9]\d*(\.\d{0,2})?$/,
                                message: '金额类型不正确'
                            }
                        }
                    }
                }
            });
        };

        function save(existCitys) {
            var bootstrapValidator = $("#form1").data('bootstrapValidator');
            bootstrapValidator.validate();
            if (bootstrapValidator.isValid()) {
                var arrSel = [];//勾选的城市  数组
                var selCityStr = "";
                var $selCity = $("#cityArea").find(".city-item input[type='checkbox']:checked");
                if ($selCity.length > 0) {
                    $selCity.each(function () {
                        selCityStr += $(this).val() + ",";
                        arrSel.push($(this).val());
                    });
                    selCityStr = selCityStr.substring(0, selCityStr.length - 1);
                }
                //已存在的城市
                var arrExist = [];
                if (typeof (existCitys) == 'string' && existCitys != "")
                    arrExist = existCitys.split(',');
                //取 [勾选的城市] 和 [已配置过的城市] 交集， 交集为后端需要覆盖其他模版的城市ID数据
                var intersection = Array.intersect(arrSel, arrExist);
                var intersectStr = intersection.length > 0 ? intersection.join(',') : "";

                console.log(intersectStr);

                  var ajaxOption=  {
                        url: '@Url.Action("ConfigExpressSave", "Config")',
                        type: "Post",
                        data: {
                            TplId: @tplInfo.ExpressFeeTplID,
                            BizTypeId: @ViewBag.BizTypeId,
                            TplName: $("#templateName").val(),
                            ExpressId: $("#expressId").val(),
                            SelCitiesStr: selCityStr,
                            SelExistCitiesStr: intersectStr,
                            Remark: $("#remark").val(),
                            Price: $("#expressPrice").val()
                        },
                        success: function (o) {
                            if (o.status == 0) {
                                BMCW.msg("保存成功", function () {
                                    BMCW.getTopSelectedWin().search();
                                });
                            } else {
                                BMCW.alert("保存失败");
                            }
                        }
                    };
                BMCW.ajax(ajaxOption);

            }
        };



        /**
         * 初始化城市
         * @@param selCitys 默认选择的城市，字符串逗号间隔
         */

        function initCitys(selCitys, existCitys) {
            //选中的城市
            var arr = [];
            if (typeof (selCitys) == 'string' && selCitys != "")
                arr = selCitys.split(',');
            //已存在的城市  标红处理
            var arrExist = [];
            if (typeof (existCitys) == 'string' && existCitys!="")
                arrExist = existCitys.split(',');
            //模板渲染
            var data = citydata;
            var pdata = citydata[100000];
            var strHtml = "";
            $.each(pdata, function (pindex, pname) {
                strHtml += '<div class="form-group" style="overflow:hidden;">';
                strHtml += '<label class="col-sm-2 control-label province" for="name">' + pname + '</label>';
                strHtml += '<div class="col-sm-3 citys">';
                var cdata = data[pindex];//城市数据
                $.each(cdata, function (cindex, cname) {
                    strHtml += '<div class="city-item">';
                    if (arr.indexOf(cindex) > -1) {
                        strHtml += '<input type="checkbox" checked="checked" value="' + cindex + '" />';
                    } else {
                        strHtml += '<input type="checkbox" value="' + cindex + '" />' ;
                    }
                    //若其他模版配置已经配置过该城市，则标红
                    if (arrExist.indexOf(cindex) > -1) {
                        strHtml += '<span style="color:red;">' + cname + '</span>';
                    }
                    else {
                        strHtml += '<span>' + cname + '</span>';
                    }
                    strHtml+='</div>'
                });
                strHtml += '</div>';
                strHtml += '</div>';
            });
            $("#cityArea").html(strHtml);
            initEventBind();
        }
        function initEventBind() {
            //全国全选
            $("#selAll").on('click', function () {
                $(".city-item input[type='checkbox']").prop("checked", true);
            });
            //全国反选
            $("#selInvert").on('click', function () {
                var $sels = $(".city-item input[type='checkbox']:checked");
                $sels.prop("checked", false);
                $(".city-item input[type='checkbox']").not($sels).prop("checked", true);
            });
        }
        //扩展方法
        function initExtends() {
            Array.intersect = function () {
                var result = new Array();
                var obj = {};
                for (var i = 0; i < arguments.length; i++) {
                    for (var j = 0; j < arguments[i].length; j++) {
                        var str = arguments[i][j];
                        if (!obj[str]) {
                            obj[str] = 1;
                        }
                        else {
                            obj[str]++;
                            if (obj[str] == arguments.length) {
                                result.push(str);
                            }
                        }//end else
                    }//end for j
                }//end for i
                return result;
            }
        }
    </script>
}


